<template>
    <view class="gifts-inner baseA">
		<u-icon label="返回" label-color="#fff" label-size="24" class="close" name="arrow-left" color="#fff" @click="hide"></u-icon>
        <view class="gift-box">
			<swiper class="swiper" >
				<swiper-item v-for="count in len">
					<u-grid :col="4" :border="false" hover-class="none">
						<u-grid-item v-if="index >= (count - 1) * 8 && index < count * 8" bg-color="transparent" :custom-style="{padding:'10rpx'}" v-for="(item, index) in ruleList">
							<view @click="handSelected(item.id, item.money)" class="gift-item" :class="selected == item.id ? 'active' : ''">
								<view class="grid-text fs20 color-ff u-line-2">{{item.name}}</view>
								<view class="grid-text fs20 gold-color">{{item.money}}</view>
							</view>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
        </view>
		<view class="bottom u-flex u-row-between u-col-center">
			<view class="gold-color fs32 money">
				<text>余额：¥{{balance}}</text>
				<text class="color-ff u-m-l-30"></text>
			</view>
			<view class="u-flex u-col-center give">
				<view class="input-group u-flex u-row-between u-col-center">
					<view class="color-ff">{{money}}</view>
					<u-icon @click="showNum" name="arrow-up" color="#fff"></u-icon>
				</view>
				<view>
					<u-button @click="recharge" hover-class="none" :hair-line="false" class="defaultbtn fs28 give-btn">充值</u-button>
				</view>
			</view>
		</view>
		<view :animation="animation" class="number-box">
			<scroll-view class="number-scroll" scroll-y="true">
				<view class="item">
					<u-input v-model="inputNum"
						type="number"
						height="64"
						input-align="center"
						placeholder="自定义金额"
						placeholderStyle="font-size:24rpx;"
						:clearable="false"
						:border="false"
						:custom-style="{color:'#fff',background:'#252324',borderRadius:'32rpx'}"
					>
					</u-input>
				</view>
			</scroll-view>
			
		</view>
    </view>
</template>

<script>
    export default{
        props: {
			ruleList: {},
			balance: 0
		},
        data() {
			return {
				baseUrl: this.config.baseUrl,
				selected: 0,
				inputNum: null,
				money: 0,
				animation: null,
				len: 0
			}
		},
		watch:{
			inputNum(nVal, oVal){
				this.money = nVal;
			},
			ruleList(nVal, oVal){
				let len = nVal.length ? nVal.length : oVal.length;
				this.calcLen(len);
			}
		},
		mounted() {
			let len = this.ruleList.length;
			this.calcLen(len);
		},
        methods: {
			calcLen(len){
				if(len % 8 == 0){
					this.len = parseInt(len / 8);
				}else{
					this.len = parseInt(len / 8) + 1;
				}
			},
            hide() {
                this.$emit('hideRecharge')
            },
			handSelected(id, money){
				this.selected = id;
				this.money = money;
			},
			selectNum(index){
				let item = this.numList[index];
				this.giftNum = item.value
				this.hideNUm();
			},
			showNum(){
				const ani = uni.createAnimation({
				    duration: 200
				})
				ani.height('84rpx').step()
				this.animation = ani.export()
			},
			hideNUm(){
				const ani = uni.createAnimation({
				    duration: 200
				})
				ani.height(0).step()
				this.animation = ani.export()
			},
			recharge(){
				this.app.goPage('/pages/member/wallet/recharge?money='+this.money);
			}
        }
    }
</script>
<style lang="scss">
    .gifts-inner {
        padding: 30rpx 20rpx 0;
        position: absolute;
        width: 100%;
        box-sizing: border-box;
		background: #27252B;
		border-radius: 40rpx 40rpx 0px 0px;
    }
    .gifts-title {
        height: 114rpx;
        line-height: 114rpx;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #111111;
        letter-spacing: 0;
        text-align: left;
        display: block;
        border-bottom: 1px solid #DBDBDB;
    }
    .close {
        position: absolute;
        left: 20rpx;
        top: 20rpx;
    }
    .gift-item {
		width: 100%;
		height: 140rpx;
		padding: 20rpx;
        border-radius: 8rpx;
        border-radius: 8rpx;
        text-align: center;
		border: 2rpx solid #999;
		
		&.active{
			border-color: #5CB61A;
		}
    }
    .gift-box{
        padding: 10rpx 0;
		margin-top: 40rpx;
    }
    .gift-item-img{
        width: 100rpx;
		height: 100rpx;
        img{
			width: 100%;
			height: auto;
		}
    }
	.swiper{
		height: 336rpx;
	}
	.bottom{
		height: 120rpx;
		border-top: 2rpx solid #525252;
		.money{
			width: 360rpx;
		}
		.give{
			width: 340rpx;
			
			.input-group{
				width: 240rpx;
				height: 64rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				border-radius: 64rpx 0 0 64rpx;
				border: 2rpx solid #5CB61A;
			}
			
		}
		.give-btn{
			width: 120rpx;
			height: 64rpx;
			border-radius: 0 64rpx 64rpx 0;
			border: none;
		}
	}
	.number-box{
		width: 256rpx;
		height: 0;
		background: #191718;
		border-radius: 12rpx;
		position: absolute;
		right: 20rpx;
		bottom: 120rpx;
		
		.number-scroll{
			height: 100%;
			.item{
				height: 64rpx;
				line-height: 64rpx;
				color: #fff;
				padding: 0 40rpx;
				margin: 10rpx auto;
			}
		}
	}
</style>